<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px" label-position="left">
          <el-col :span="8">
            <el-form-item label="日期"  style="height:30px">
              <el-date-picker  v-model="alarmdate" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="使用场地">
              <el-select v-model="listQuery.fsiteNo" @change="changeFsiteNo" :disabled="this.$store.state.user.froleid==3||this.$store.state.user.froleid == 4" clearable filterable placeholder="请选择使用场地">
                  <el-option
                    v-for="item in fsiteNoBelongOptions2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
            </el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="8">
            <el-form-item class="searchOne" label="操作人员">
              <el-select  clearable filterable v-model="listQuery.foperator"
             placeholder="请选择操作人员">
              <el-option v-for="item in getListfuseuserArea" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品名">
              <el-input v-model="listQuery.fgoodname" clearable 
                placeholder="请输入品名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作类型" >
              <el-select v-model="listQuery.fdicttype" clearable placeholder="请选择操作类型">
                <el-option v-for="item in fdicttypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item  label="储物柜">
              <el-select
                v-model="listQuery.fcabbarcode"
                clearable
                placeholder="请选择储物柜"
              >
                <el-option
                  v-for="item in cablists"
                  :key="item.index"
                  :label="item.fequipmenttag"
                  :value="item.fequipmentbarcode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          </template>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="handleFilter">查找</el-button>
                <el-button type="info" @click="handleExport">
                导出
              </el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true"
                v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起</el-button>
              </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
       <!-- 查询结果 -->
        <JNPF-table v-loading="listLoading" :data="list" >
          <el-table-column :width="buttonColor.line" :index="indexMethod" align="center" label="序号" type="index" />
          <el-table-column :formatter="formatfsiteNo" align="left" label="使用场地" prop="fsiteNo"/>
          <el-table-column width="160" :formatter="datetimeFormat" align="left" label="日期"
            prop="fupddate" />
            <el-table-column :width="buttonColor.user" align="left" label="授权人"
            prop="fauthorizer" />
            <el-table-column :width="buttonColor.user" align="left" label="操作人员"
            prop="username" />
          <el-table-column align="left" label="柜名" prop="fcabname" />
          <el-table-column align="left" label="仓名" prop="fboxname" />
          <el-table-column align="left" label="品名" prop="fgoodname" />
          <el-table-column :width="buttonColor.state" align="center" label="操作类型" prop="fdictname" />
          <el-table-column align="center" label="操作明细" prop="fqty" />
        </JNPF-table>
        <paginations
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
          />
      </div>
    </div>
  </div>
</template>
<script>
import {
  glgtzList
} from "@/api/useHead2";
import moment from "moment";
import { tableColor, titleColor, buttonColor } from "@/filters/index";
import { getListArea, fsiteOptionsByLevel2 } from "@/api/area";
import { listtsCabinet } from "@/api/tsCabinet";

import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  name: "ITcUseHead",
  data() {
    return {
      cabDialogFsiteNo: null,
      cabinetVisible:false,
      showAll:false,
      cablists: [],
      fdicttypeOptions: [],
      fsiteNoBelongOptions2:[],
      excludeAdmin: 4, // 只根据角色
      userFlag: null,
      searchVisibleuse: false,
      userDialogFsiteNo: null,
      getListfuseuser: [],
      getListfuseuserArea: [],
      list: null,
      total: 0,
      listLoading: true,
      alarmdate: null,
      listQuery: {
        page: 1,
        limit: 20,
        fcabbarcode: undefined,
        fsiteNo: undefined,
        foperator: undefined,
        fgoodname: undefined,
        fdicttype: undefined,
        ftakedateStart: undefined,
        ftakedateEnd: undefined,
        sort: "create_time",
        order: "desc",
      },
      tableColor,
      titleColor,
      buttonColor,
    };
  },
  created() {
    console.log('new Date()',new Date());
    console.log('new Date()',    this.formatDate1(new Date()));
    this.alarmdate = [
    this.formatDate1(new Date()) + ' '+ '00:00:00',
      new Date(),
    ];
    this.getList();
    // 使用场地
    fsiteOptionsByLevel2(3)
      .then((response) => {
        this.fsiteNoBelongOptions2 = response.data.data.list;
      })
      .catch(() => {
        this.fsiteNoBelongOptions2 = [];
      });

      if (this.$store.state.user.froleid == 3||this.$store.state.user.froleid == 4) {
        this.listQuery.fsiteNo = this.$store.state.user.fsiteNo;

        // 人员弹出框
        getListArea({ flag: 13, arg1: this.$store.state.user.fsiteNo,arg2: 6 })
          .then((response) => {
            this.getListfuseuser = response.data.data.list;
            this.getListfuseuserArea = response.data.data.list;
          })
          .catch(() => {
            this.getListfuseuser = [];
            this.getListfuseuserArea = [];
          });
      }

       // 操作类型
    getListArea({ flag: 34, arg1: 3004})
      .then((response) => {
        this.fdicttypeOptions = response.data.data.list;
      })
      .catch(() => {
        this.fdicttypeOptions = [];
      });

      // 储物柜
      listtsCabinet({limit: -1,fsiteNo:this.$store.state.user.fsiteNo})
      .then((response) => {
        this.cablists =response.data.data.list
      })
      .catch(() => {
        this.cablists = [];
      });

  },
  methods: {
    // 储物柜弹出框
    searchDialogcabinet() {
      this.cabinetVisible = true
      this.cabDialogFsiteNo = this.$store.state.user.fsiteNo
    },

    // 储物柜弹出框
    cabinetDialogValue(value){
        this.listQuery.fcabbarcode = value.info.fequipmentbarcode
    },
    handleExport() {
      //  .table要导出的是哪一个表格
      var excelDom = XLSX.utils.table_to_book(document.querySelector(".downtable"), { raw: true });
      var excelType = XLSX.write(excelDom, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        //  name+'.xlsx'表示导出的excel表格名字
        FileSaver.saveAs(
          new Blob([excelType], { type: "application/octet-stream" }), "管理柜台账.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined");
      }
      return excelType;
    },
    changeFsiteNo(data){
      this.listQuery.foperator = ''
      this.getListfuseuserArea = []
      if(data){
        // 人员弹出框
        getListArea({ flag: 13, arg1: data,arg2: 6 })
          .then((response) => {
            this.getListfuseuserArea = response.data.data.list;
          })
          .catch(() => {
            this.getListfuseuserArea = [];
          });
      }
    },
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    formatDate: function (date) {
      if (typeof date === "object") {
        var ym;
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        if (m < 10) {
          m = "0" + m;
        }
        if (d < 10) {
          d = "0" + d;
        }
        ym = "" + y + m + d;
        return ym;
      } else {
        return date;
      }
    },
    formatDate1: function (date) {
        var ym;
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        if (m < 10) {
          m = "0" + m;
        }
        if (d < 10) {
          d = "0" + d;
        }
        ym =  y +'-'+ m + '-' + d;
        return ym;
    },
    // 使用场地
    formatfsiteNo: function (row, column) {
      if (this.fsiteNoBelongOptions2) {
        for (let i = 0; i < this.fsiteNoBelongOptions2.length; i++) {
          if (row.fsiteNo === this.fsiteNoBelongOptions2[i].value) {
            return this.fsiteNoBelongOptions2[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },

    // 搜索人员弹出框
    searchDialoguse(value) {
      this.userFlag = value;
      if (value === "add") {
        this.userDialogFsiteNo = this.dataForm.fsiteNo;
      } else {
        this.userDialogFsiteNo = this.listQuery.fsiteNo;
      }
      this.searchVisibleuse = true;
    },

    // 人员弹出框返回值
    userDialogValue(value) {
      if (this.userFlag === "add") {
        this.dataForm.foperator = value.user.id.toString();
      } else {
        this.listQuery.foperator = value.user.id.toString();
      }
    },
    getList() {
      this.listQuery.ftakedateStart =
        this.alarmdate == null ? null : moment(this.alarmdate[0]).format("YYYYMMDDHHmmss");
      this.listQuery.ftakedateEnd =
        this.alarmdate == null ? null : moment(this.alarmdate[1]).format("YYYYMMDDHHmmss");
      this.listLoading = true;
      glgtzList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    indexMethod(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>
